<!DOCTYPE html>
<html lang="cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>login</title>
</head>
<link href="https://cdn.bootcss.com/minireset.css/0.0.2/minireset.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<style>
  * {
        font-size: 20px;
    }

    body {
        padding: 10px 20px;
    }

    .group {
        margin-bottom: 20px;
    }

    .line {
        line-height: 35px;
    }

    .input-cookie {
        width: 100%;
        height: 200px;
    }

    .input-cookie textarea {
        width: 100%;
        height: 200px;
        padding: 10px;
    }

    .btns {
        line-height: 80px;
        text-align: center;
        width: 100%;
    }

    .btns button {
        width: 200px;
    }
</style>

<body>
  <div id="app">
    <form action="">
      <div class="group">
        <p class="line">用户名:</p>
        <p><input v-model="userName" type="text" placeholder="用户名"></p>
      </div>
      <div class="group">
        <p class="line">cooike:</p>
        <p class="input-cookie"> <textarea v-model="qianKaCookie" name="" id="" cols="30" rows="10" placeholder="必填"></textarea></p>
      </div>
      <div class="group">
        <label for="auto-task"><input type="checkbox" id="auto-task" v-model="autoApplyTask">自动抢任务(内侧)</label>
      </div>
      <p class="btns"><button type="button" @click="onLogin">登录</button></p>
    </form>
  </div>
</body>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/js-cookie/latest/js.cookie.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.22/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      userName: '',
      qianKaCookie: '',
      autoApplyTask: false
    },
    created() {
      this.userName = Cookies.get('userName')
      this.qianKaCookie = Cookies.get('qianKaCookie')
      this.autoApplyTask = eval(Cookies.get('autoApplyTask')||'false')
    },
    methods: {
      onLogin() {
        if (this.qianKaCookie) {
          Cookies.set('userName', this.userName, {
            expires: 9999
          })
          Cookies.set('qianKaCookie', this.qianKaCookie, {
            expires: 9999
          })
          Cookies.set('autoApplyTask', this.autoApplyTask, {
            expires: 9999
          })
          $.ajax({
            url: 'http://10.10.61.153:3000/autoApplyTask',
            data: {
              userName: this.userName,
              cookie: this.qianKaCookie,
              type: this.autoApplyTask ? 1 : 0
            },
            success(res) {
              console.log(res)
              if (!res.success) {
                toastr.error(res.message)
              } else {
                toastr.success('登录成功!')
                setTimeout(() => {
                  location.href = "/index.html"
                }, 500)
              }
            },
            error(err) {
              toastr.error(err)
              alert(JSON.stringify(err))
            }
          })
        } else {
          toastr.error('请填写钱咖cookie')
        }
      }
    }
  });

</script>

</html>
